.orders {
  border     : 1px solid #DADFE6;
  display    : flex;
  align-items: center;
  position   : relative;
  cursor     : pointer;

  &:hover {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .08), 0 0 1px 0 rgba(0, 0, 0, .05);
    box-shadow        : 0 4px 8px 0 rgba(0, 0, 0, .08), 0 0 1px 0 rgba(0, 0, 0, .05);
  }

  &>div:nth-of-type(1) {
    background : #f3f5f9;
    width      : 100px;
    text-align : center;
    line-height: 82px;

    span {
      font-family   : PingFangSC;
      letter-spacing: 0;
    }

    span:nth-of-type(1) {
      font-size: 24px;
      color    : #000000;
    }

    span:nth-of-type(2) {
      color    : #b7bcc7;
      font-size: 14px;
    }
  }

  &>div:nth-of-type(2) {
    flex           : 1 1;
    height         : 82px;
    display        : flex;
    justify-content: center;
    flex-direction : column;


    background  : #fff;
    padding-left: 11%;
    text-align  : center;

    &>div:nth-of-type(1) {
      text-align: left;

      span {
        font-family   : PingFangSC;
        letter-spacing: 0;
        font-size     : 24px;
        font-weight   : 500;
        color         : #000000;
      }


      s {
        margin-left: 12px;
        font-size  : 14px;
      }
    }

    &>div:nth-of-type(2) {
      color     : #202d40;
      font-size : 12px;
      text-align: left;
    }


  }

}

.tagVertical {
  height           : 37px;
  width            : 30px;
  position         : absolute;
  right            : 20px;
  top              : -2px;
  text-align       : center;
  background-image : url(https://assets.codehub.cn/static-enterprise/media/recommend.d138cdde.png);
  background-repeat: no-repeat;
  background-size  : cover;
  font-size        : 18px;
  color            : #fff;
}



.checked {
  border-color: #06f;

  .durationChecked {
    position         : absolute;
    right            : -35px;
    bottom           : -35px;
    width            : 0;
    height           : 0;
    border           : 35px solid transparent;
    border-top-color : #06f;
    font-size        : 18px;
    -webkit-transform: rotate(315deg);
    -ms-transform    : rotate(315deg);
    transform        : rotate(315deg);
    color            : #fff;
  }

  .cukIconCheck {
    position         : absolute;
    top              : -29px;
    left             : -9px;
    -webkit-transform: rotate(45deg);
    -ms-transform    : rotate(45deg);
    transform        : rotate(45deg);
  }
}


.boxs {
  background: #F5F7FA;

  p {
    font-family   : PingFangSC-Regular;
    font-size     : 25px;
    color         : #2B3844;
    letter-spacing: 0;
    margin-bottom : 0 !important;
    text-align    : center;
  }

  p:nth-of-type(1) {
    margin-top: 66px;
  }

  p:nth-of-type(3) {
    font-size    : 14px;
    color        : #001A00;
    height       : 36px;
    line-height  : 36px;
    margin-bottom: 38px !important;
  }
}

.ordelText {
  font-family   : PingFangSC;
  font-size     : 14px;
  color         : #323A45;
  letter-spacing: 0;
  text-align    : right;
}

.orderText {
  font-family   : PingFangSC;
  font-size     : 14px;
  color         : #999990;
  letter-spacing: 0;
  padding-left  : 24px;
}

.segmentation {
  border: 1px solid #979797;
  height: 113px;
  width : 1px;
}

.orderTitleL {
  &>div {
    font-family   : PingFangSC;
    color         : #606C80;
    letter-spacing: 0;
  }

  &>div:nth-of-type(1) {
    font-size    : 14px;
    margin-bottom: 13px;
  }

  &>div:nth-of-type(2) {
    font-size: 24px;
  }
}

.orderTitleR {
  &>p {
    font-family   : PingFangSC;
    letter-spacing: 0;
    margin-bottom : 14px;
    display       : flex;
    align-items   : center;

    span {
      display: inline-block;
      width  : 58px;
    }
  }

  &>p:nth-of-type(1) {
    font-size: 14px;
    color    : #606C80;
  }

  &>p:nth-of-type(2),
  &>p:nth-of-type(3) {
    font-size: 14px;
    color    : #323A45;
  }
}

.tabs {
  :global {
    .ant-tabs-nav-wrap {
      background: #fff;
    }
  }
}

.unit {
  padding-top : 28px;
  padding-left: 51px;

  h5 {
    font-family   : PingFangSC-Semibold;
    font-size     : 24px;
    color         : #000000;
    letter-spacing: 0;
  }

  div {
    border-right: 1px solid #979797;

    p {
      font-family   : PingFangSC-Regular;
      font-size     : 14px;
      color         : #606C80;
      letter-spacing: 0;
    }

    h6 {
      font-family   : PingFangSC-Semibold;
      font-size     : 24px;
      color         : #000000;
      text-align    : left;
      letter-spacing: 0;
    }


  }
}

@media screen and (max-width: 1400px) and (min-width: 1000px) {
  .unit {
    padding-left: 30px;
  }
}

.imgbox {
  display        : flex;
  align-items    : center;
  justify-content: center;

  img {
    width       : 200px;
    height      : 200px;
    margin-right: 31px;
  }

  div {
    p {
      font-family   : PingFangSC-Regular;
      font-size     : 25px;
      color         : #333333;
      letter-spacing: 0;
      margin-bottom : 0 !important;
    }

    p:nth-of-type(2) {
      margin-top: 28px;
      font-size : 20px;
      color     : #0052CC;
      cursor    : pointer;
    }
  }
}


.serviceBox {
  background: #fff;
  padding   : 40px 38px 18px 40px;
  height    : 100%;
}

.serviceDetailsBox {
  display        : flex;
  justify-content: space-between;
}

.serviceDetailsL {
  width      : 70%;
  margin-left: 18px;

  h6 {
    font-family   : PingFangSC-Semibold;
    font-size     : 24px;
    color         : #000000;
    letter-spacing: 0;
    margin-bottom : 13px;
    margin-left   : -18px;
  }

  ul {
    li {
      font-family   : PingFangSC;
      font-size     : 14px;
      color         : #8592A5;
      letter-spacing: 0;
      margin-bottom : 9px;
    }
  }

  &>a {
    font-family   : PingFangSC;
    font-size     : 14px;
    color         : #0066FF;
    letter-spacing: 0;
  }
}

.serviceDetailsR {
  padding-top: 66px;
  flex       : 1 1;

  div {
    font-family   : PingFangSC-Semibold;
    font-size     : 14px;
    color         : #8592A5;
    letter-spacing: 0;
  }

  &>div:nth-of-type(1) {
    span:nth-of-type(1) {
      font-size: 32px;
      color    : #000000;
    }
  }
}

.capacityBox {
  margin-bottom: 14px;

  span {
    font-family   : PingFangSC;
    font-size     : 12px;
    color         : #8592A5;
    letter-spacing: 0;
  }

  span:nth-of-type(1) {
    font-family: PingFangSC-Medium;
    font-size  : 16px;
    color      : rgba(0, 0, 0, 0.85);
  }
}

.amount {
  margin-bottom: 20px;
  background   : #f3f5f9;

  &>div {
    font-family   : PingFangSC;
    font-size     : 14px;
    color         : #8592A5;
    letter-spacing: 0;
  }

  &>div:nth-of-type(1) {
    span:nth-of-type(1) {
      font-size: 20px;
      color    : #000000;
    }

    span:nth-of-type(2) {
      font-size: 24px;
      color    : #F5A623;
    }
    span:nth-of-type(3) {
      margin-left: 10px;
      font-size     : 12px;
      color         : #8592A5;
    }
  }
}

.showInput {
  :global {
    .ant-input-number-handler-wrap {
      opacity: 1;
    }
  }
}

.zslSlider {
  :global {
    .ant-slider-rail {
      background: #f5f7fa !important;
      height    : 20px !important;

      &:before,
      &:after {
        display      : inline-block;
        content      : "";
        background   : #80b3ff;
        border-radius: 1px;
        height       : 30px;
        width        : 3px;
        position     : absolute;
        top          : -5px;
        z-index      : 3;
      }

      &:before {
        left: 0;
      }

      &:after {
        right: 0;
      }
    }

    .ant-slider-step {
      bottom: -15px;
    }

    .ant-slider-handle {
      border-radius: 5px !important;
      box-shadow   : 0 1px 2px 0 rgba(0, 0, 0, .05), 0 3px 10px 0 rgba(96, 108, 128, .3);
      height       : 40px !important;
      width        : 20px !important;
      margin-top   : -10px !important;
      z-index      : 9;
      border-color : #fff !important;

      .ant-tooltip-open {
        border-color: #fff !important;
      }
    }

    .ant-slider-dot {
      margin-left  : -2px !important;
      border-radius: inherit !important;
      border       : 1px solid #dadfe6 !important;
      height       : 5px !important;
      width        : 1px !important;
      top          : 0 !important;
    }

    .ant-slider-track {
      height    : 20px !important;
      background: linear-gradient(90deg, #80b3ff, #3386ff) !important;
    }

    .ant-slider-mark {
      top: 35px !important;
    }
  }
}
